<template>
	<div class="top">
		<h6>优惠卷</h6>
		<div class="miao">
			<span>优惠卷筛选</span>
			<div class="yy">
				<span class="example-block">优惠类型</span>
				 <el-select v-model="value" class="m-2" placeholder="请选择" size="large" />
				     <el-option
				       v-for="item in options"
				       :key="item.value"
				       :label="item.label"
				       :value="item.value"
				     />
			<span class="example-block-o">添加时间</span>
			<el-date-picker v-model="timeRange"  type="datetimerange"
			    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
			    @change="getList" :disabledDate="disablesDate"
			/>
			<span class="example-block-o"></span>
			<input type="text" class="shai" placeholder="请输入优惠卷名称或编码">
			<button>筛选</button>
			</div>
			
		</div>
		<div class="miao-o">
			<span>优惠卷列表</span>
			<button>添加优惠卷</button>
		</div>
	<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"  class="top_miao">
		<el-table-column type="selection" width="55">
		</el-table-column>
		<el-table-column label="编号" width="120">
			<template slot-scope="scope">{{ ser.name }}</template>
		</el-table-column>
		<el-table-column prop="name" label="名称" width="120">
		</el-table-column>
		<el-table-column prop="address" label="使用范围" show-overflow-tooltip>
		</el-table-column>
		<el-table-column prop="address" label="使用门槛" show-overflow-tooltip>
		</el-table-column>
		<el-table-column prop="address" label="面值" show-overflow-tooltip>
		</el-table-column>
		<el-table-column prop="address" label="有效期" show-overflow-tooltip>
		</el-table-column>
		<el-table-column prop="address" label="状态" show-overflow-tooltip>
		</el-table-column>
		<el-table-column prop="address" label="操作" show-overflow-tooltip>
			<div style="margin-top: 20px">
				<el-button>切换第二、第三行的选中状态</el-button>
				<el-button>取消选择</el-button>
			</div>
		</el-table-column>
	</el-table>
</div>
</template>

<script>
	import {ref} from 'vue'
	export default {
		name: 'cao',
		setup() {
			
		},
		disablesDate(time){
		  const _minTime = Date.now() + 24 * 60 * 60 * 1000 * 7 //最小时间可选前七天
		  const _maxTime = Date.now() - 24 * 60 * 60 * 1000 * 1 //最大时间可选今天
		  return time.getTime() <= _maxTime || time.getTime() > _minTime
		}
	}
</script>
<style>
	.yy>button{
		float: right;
		width: 80px;
		height: 40px;
		margin: 15px 40px;
		background-color: #38a28a;
		border: none;
		border-radius: 5px;
		color: white;
	}
	.shai{
		width: 300px;
		height: 30px;
		border-radius: 5px;
		border: 1px solid #dcdfe6;
		padding-left: 5px;
		outline:none
	}
	.example-block {
	  margin-right: 1rem;
	}
	.example-block-o {
	  margin:  0 1rem;
	}
	.yy{
		width: 100%;
		height: 100px;
		padding-left:30px ;
	}
	.top>button{
		background-color: #38a28a;
		color: white;
		width: 70px;
		height: 30px;
		float: right;
		border: none;
		border-radius: 5px;
		margin-top: -10px;
	}
	.top{
		width: 100%;
		height: 100%;
		padding: 30px 30px;
		background-color: #f0f0f0;
	}
	h6{
		color: black;
		float: left;
	}
	.top>.top_miao{
		width: 100%;
		height: 100vh;
	}
	.miao{
		width: 100%;
		height: 150px;
		margin-top: 40px;
		background-color: white;
		line-height: 50px;
		color: black;
		margin-bottom:20px ;
	}
	.miao-o{
		width: 100%;
		height: 70px;
		margin-top: 30px;
		background-color: white;
		line-height: 70px;
		color: black;
		margin-bottom:3px ;
	}
	.miao>span{
		padding-left:30px ;
	}
	.miao-o>span{
		padding-left:30px ;
	}
	.miao>button{
		float: right;
		width: 80px;
		height: 40px;
		margin: 30px 20px;
		background-color: #38a28a;
		border: none;
		border-radius: 5px;
		color: white;
	}
	.miao-o>button{
		float: right;
		width: 80px;
		height: 40px;
		margin: 15px 10px;
		background-color: #38a28a;
		border: none;
		border-radius: 5px;
		color: white;
	}
</style>
